@keyframes slideInUp {
  from {
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.slideInUp {
  animation-name: slideInUp;
}

@keyframes slideInRight {
  from {
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.slideInRight {
  animation-name: slideInRight;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  animation-name: fadeIn;
}

@keyframes slideInDown {
  from {
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.slideInDown {
  animation-name: slideInDown;
}

@keyframes slideInDowntooltip {
  from {
    transform: translate3d(0, 48px, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.slideInDownTooltip {
  animation-name: slideInDowntooltip;
}

@keyframes slideInDowntooltip1 {
  from {
    transform: translate3d(0, 20px, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.slideInDownTooltip1 {
  animation-name: slideInDowntooltip1;
}

@keyframes slideInUpTooltip1 {
  from {
    transform: translate3d(0, -20px, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.slideInUpTooltip1 {
  animation-name: slideInUpTooltip1;
}

@keyframes slideInUpTooltip {
  from {
    transform: translate3d(0, -48px, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.slideInUpTooltip {
  animation-name: slideInUpTooltip;
}

.animated {
  animation-duration: 1s;
  animation-fill-mode: backwards;
}

.animated.infinite {
  animation-iteration-count: infinite;
}

.animated.delay-1s {
  animation-delay: 1s;
}

.animated.delay-2s {
  animation-delay: 2s;
}

.animated.delay-3s {
  animation-delay: 3s;
}

.animated.delay-4s {
  animation-delay: 4s;
}

.animated.delay-5s {
  animation-delay: 5s;
}

.animated.fast {
  animation-duration: 800ms;
}

.animated.faster {
  animation-duration: 300ms;
}

.animated.fastest {
  animation-duration: 300ms;
}

.btn-primary::before {
  content: "";
  position: absolute;
  width: 0;
  left: 50%;
  height: 100%;
  background: rgba(255, 255, 255, 0.3);
  top: 0;
}

.btn-primary::after {
  content: "";
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  transform: scale(0);
}

.btn-primary:active::after {
  animation: ripple 0.3s linear;
}

@keyframes ripple {
  0% {
    transform: scale(0.4);
    background: rgba(255, 255, 255, 0.1);
  }

  50% {
    transform: scale(0.8);
    background: rgba(255, 255, 255, 0.2);
  }

  100% {
    transform: scale(1);
    opacity: 0.1;
    background: rgba(255, 255, 255, 0.3);
  }
}

@media all and (min-width: 768px) {
  .btn-primary:hover::after {
    animation: ripple 0.3s linear;
  }

  .btn-primary:hover {
    box-shadow: 0 0 17px -8px inset rgba(2, 46, 111, 0.42);
  }

  .btn-primary:hover * {
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.16862745098039217);
  }
}